import * as echarts from '../../component/ec-canvas/echarts';

let app = getApp()
let chart = null;
let skuChart = null;

function initChart(canvas, width, height, dpr) {
    chart = echarts.init(canvas, null, {
        width: width,
        height: height,
        devicePixelRatio: dpr // new
    });
    canvas.setChart(chart);
    return chart;
}

function initSkuChart(canvas, width, height, dpr) {
    skuChart = echarts.init(canvas, null, {
        width: width,
        height: height,
        devicePixelRatio: dpr // new
    });
    canvas.setChart(skuChart);
    return skuChart;
}

Page({
    data: {
        spinShow: false,
        current: 0,
        queryParam: {
            type: 0,
            days: 7
        },
        ec: {
            onInit: initChart
        },
        skuec: {
            onInit: initSkuChart
        },
        option1: [
            {text: '按款号统计', value: 1},
            {text: '按天统计', value: 2},
        ],
        type: 1,
        tabOption: [
            {text: '近3天', value: 3},
            {text: '近7天', value: 7},
            {text: '近15天', value: 15},
            {text: '近30天', value: 30},
        ],
        tabActive: 0,
    },
    /**
     * 生命周期函数--监听页面加载
     */
    onLoad: function (options) {
    },
    onShow() {
        let _this = this
        setTimeout(function () {
            // 获取 chart 实例的方式
            // console.log(chart)
            // let options = chart.getOption();
            _this.handlerQueryData()
        }, 500);
    },
    onChange: function () {
        this.handlerQueryData()
    },
    onChangeTab: function (e) {
        console.log(e)
        let name = e.detail.name
        this.data.queryParam.days =name
        this.handlerQueryData()
    },
    handleChange({
                     detail
                 }) {
        console.log(detail)

        this.setData({
            spinShow: true
        });
        this.setData({
            current: detail.key,
            queryParam: {
                type: detail.key,
                days: 7
            },
        });
        this.queryData()
    },
    handlerQueryData: function () {
        this.setData({
            spinShow: true
        });
        if (this.data.type == 1) {
            this.queryDataByCargo()
        } else if (this.data.type == 2) {
            this.queryData()
        }
    },
    queryData: function () {
        let _this = this
        console.log(_this.data.queryParam)
        // 销售总量/天
        app.formGet("/app/report/day/sales?type=0&days=7", _this.data.queryParam).then(res => {
            _this.setData({
                spinShow: false
            });
            wx.stopPullDownRefresh()
            console.log(res)
            if (res.code === 0) {
                let seriesData = res.data.seriesData
                let xAxisData = res.data.xAxisData
                let options = {
                    title: {
                        // text: "销售量/天",
                        left: "center",
                        top: "top",
                        textStyle: {
                            fontSize: 25,
                            color: '#13ccd3'
                        }
                    },
                    xAxis: {
                        type: 'category',
                        data: []
                    },
                    yAxis: {
                        type: 'value',
                    },
                    series: [{
                        data: [],
                        type: 'bar'
                    }]
                };
                options.xAxis = {
                    type: 'category',
                    data: xAxisData,
                    axisLabel: {
                        rotate: 45
                    }
                }
                options.series = [{
                    data: seriesData,
                    type: 'line',
                    label: {
                        normal: {
                            show: true,
                            position: 'top'
                        }
                    }
                }]
                chart.setOption(options, true)
            } else {
                app.message(res.message, 'error')
            }
        }).catch(e => {
            _this.setData({
                spinShow: false
            });
            app.message(e, 'error')
        })
    },
    queryDataByCargo: function () {
        let _this = this
        // 款式销售量/天
        console.log(_this.data.queryParam)
        app.formGet("/app/report/day/sales/cargono?type=0&days=7", _this.data.queryParam).then(res => {
            _this.setData({
                spinShow: false
            });
            wx.stopPullDownRefresh()
            if (res.code === 0) {
                let dataset = res.data.dataset
                let dimensions = res.data.dataset.dimensions
                let series = []
                if (dimensions.length > 1) {
                    for (let i = 1; i < dimensions.length; i++) {
                        let serieObj = {}
                        serieObj.name = dimensions[i]
                        serieObj.type = 'bar'
                        serieObj.label = {
                            normal: {
                                show: true,
                                position: 'top'
                            }
                        }
                        serieObj.itemStyle = {}
                        series.push(serieObj)
                    }
                }
                let options = {
                    title: {
                        // text: "款号销售量/天",
                        // textStyle: {
                        //     fontSize: 25,
                        //     color: '#13ccd3'
                        // }
                    },
                    legend: {},
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: { // 坐标轴指示器，坐标轴触发有效
                            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
                        },
                        confine: true
                    },
                    grid: {
                        left: 20,
                        right: 20,
                        bottom: 15,
                        top: 40,
                        containLabel: true
                    },
                    dataset: {},
                    xAxis: [{
                        type: 'category',
                        axisTick: {
                            show: true
                        },
                        axisLabel: {
                            rotate: 45
                        }
                    }],
                    yAxis: [{
                        type: 'value',
                    }],
                    series: []
                }
                options.dataset = dataset
                options.series = series
                skuChart.setOption(options, true)
            } else {
                app.message(res.message, 'error')
            }
        }).catch(e => {
            _this.setData({
                spinShow: false
            });
            app.message(e, 'error')
        })
    }
});
